<template>
  <div>
    <h2>图片上传</h2>
    <p style="margin-bottom: 50px">基于element ui  upload组件的二次封装，封装图片上传常用属性</p>

    <el-divider content-position="left">上传单张图片</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-upload-img
            :value="fileUrl"
            @uploadSuccess="uploadSuccess"
          ></es-upload-img>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          uploadSuccess 上传成功回调
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-upload-img
            <br>&nbsp;&nbsp;&nbsp;&nbsp;:value"<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;@uploadSuccess="<span class="attr">uploadSuccess</span>"
            <br>> &lt;/es-upload-img>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">上传多张图片</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 100%;">
          <es-upload-img
            :value="fileArray"
            multiple
            :limit="5"
            @uploadSuccess="uploadSuccess2"
          ></es-upload-img>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          multiple开启多选、多选值回调使用数组
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-upload-img
            <br>&nbsp;&nbsp;&nbsp;&nbsp;value="<span class="attr">valueArray</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;multiple
            <br>&nbsp;&nbsp;&nbsp;&nbsp;:limit="5"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;@uploadSuccess="<span class="attr">uploadSuccess</span>"
            <br>> &lt;/es-cascader>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">数据返回格式</el-divider>
    <div class="demo-block">
      <div class="source">
        <span class="attr">code</span>&nbsp;&nbsp;200成功 其他失败
        <br><span class="attr"> msg</span>&nbsp;&nbsp;附带消息 请求失败时弹出msg中的消息
        <br><span class="attr">url</span>&nbsp;&nbsp;图片地址
      </div>
      <div class="meta">
        <div class="hljs highlight">
          <code>
            {
            <br>&nbsp;&nbsp;"code":200,
            <br>&nbsp;&nbsp;"msg":"success"
            <br>&nbsp;&nbsp;"url":"/xxxx/xxx.png"
            <br>}
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">Attributes</el-divider>
    <div class="demo-block demo-table">
      <demo-table :table-data="tableData"></demo-table>
    </div>

  </div>
</template>

<script>
  import DemoTable from '../../components/module/demo-table'

  export default {
    name: 'zwUploadImgDemo',
    components: {DemoTable},
    data () {
      return {
        showId: 0,
        fileUrl: "/static/img/404.png",
        fileArray: ["/static/img/404.png","/static/img/head.jpg"],
        tableData: [
          {
            param: 'value',
            remark: '图片地址，多个值数组',
            type: 'string/Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'action',
            remark: '图片上传接口地址',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'multiple',
            remark: '是否上传多张图片',
            type: 'boolean',
            usable: '—',
            default: '—'
          },
          {
            param: 'name',
            remark: '上传的文件字段名',
            type: 'string',
            usable: '—',
            default: 'file'
          },
          {
            param: 'limit',
            remark: '最大允许上传个数',
            type: 'number',
            usable: '—',
            default: '100'
          },
          {
            param: 'size',
            remark: '单个文件最大大小(M)',
            type: 'number',
            usable: '—',
            default: '100'
          },
          {
            param: '@uploadSuccess',
            remark: '上传成功回调',
            type: 'function',
            usable: '—',
            default: '—'
          },
        ]
      }
    },
    methods: {
      uploadSuccess: function (res) {
        this.fileUrl = res;
      },
      uploadSuccess2: function (res) {
        this.fileArray = res;
      },
      showCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'block'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[6].style.display = 'block'
      },
      hideCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'none'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[4].style.display = 'block'
      },
    }
  }
</script>

<style scoped>
  .demo-block {

  }
</style>
